<template>
  <div class="deploy-view">
    <div class="header">
      <h2>部署中心</h2>
      <div class="header-actions">
        <button class="refresh-btn" @click="fetchDeployments">
          <i class="fas fa-sync"></i>
          刷新
        </button>
      </div>
    </div>

    <div class="deploy-list">
      <div v-for="deploy in deployments" :key="deploy._id" class="deploy-item">
        <div class="deploy-header">
          <div class="project-info">
            <h3>{{ deploy.project?.name || '未知项目' }}</h3>
            <span :class="['status-badge', deploy.status]">
              {{ getStatusText(deploy.status) }}
            </span>
          </div>
          <div class="deploy-time">
            {{ formatDate(deploy.startTime) }}
          </div>
        </div>

        <div class="deploy-content">
          <div class="deploy-details">
            <div class="detail-item">
              <label>分支</label>
              <span>{{ deploy.branch }}</span>
            </div>
            <div class="detail-item">
              <label>提交</label>
              <span>{{ deploy.commitId?.slice(0, 7) || '未知' }}</span>
            </div>
            <div class="detail-item">
              <label>部署人</label>
              <span>{{ deploy.deployedBy?.username || '未知' }}</span>
            </div>
          </div>

          <div class="deploy-logs">
            <div v-for="(log, index) in deploy.logs" :key="index"
                 :class="['log-entry', log.level]">
              <span class="log-time">{{ formatTime(log.timestamp) }}</span>
              <span class="log-message">{{ log.message }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="!deployments.length" class="empty-state">
      <img src="../assets/empty.svg" alt="暂无部署">
      <p>暂无部署记录</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { projectApi } from '../api/project'

const deployments = ref([])
const loading = ref(false)

const getStatusText = (status) => {
  const statusMap = {
    running: '部署中',
    success: '部署成功',
    failed: '部署失败'
  }
  return statusMap[status] || status
}

const formatDate = (date) => {
  return new Date(date).toLocaleString()
}

const formatTime = (date) => {
  return new Date(date).toLocaleTimeString()
}

const fetchDeployments = async () => {
  try {
    loading.value = true
    const data = await projectApi.getAllDeployments()
    deployments.value = data
  } catch (error) {
    console.error('获取部署列表失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchDeployments()
})
</script>

<style scoped>
.deploy-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.refresh-btn:hover {
  background: #f5f5f5;
}

.deploy-item {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.deploy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.project-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.status-badge {
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  font-size: 0.9rem;
}

.status-badge.running {
  background: #fff3e0;
  color: #f57c00;
}

.status-badge.success {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-badge.failed {
  background: #ffebee;
  color: #c62828;
}

.deploy-time {
  color: #666;
  font-size: 0.9rem;
}

.deploy-details {
  display: flex;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.detail-item label {
  color: #666;
  font-size: 0.9rem;
  margin-right: 0.5rem;
}

.deploy-logs {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1rem;
  font-family: monospace;
}

.log-entry {
  padding: 0.3rem 0;
  font-size: 0.9rem;
}

.log-time {
  color: #666;
  margin-right: 1rem;
}

.log-entry.info { color: #1976d2; }
.log-entry.warning { color: #f57c00; }
.log-entry.error { color: #c62828; }

.empty-state {
  text-align: center;
  padding: 4rem 0;
}

.empty-state img {
  width: 200px;
  margin-bottom: 2rem;
}

.empty-state p {
  color: #666;
}
</style> 